<template>
<el-tree-select class="w-full" :props="{label: 'title',children: 'children',disabled: setDisable}" :check-strictly="true" placeholder="请选择上级菜单" node-key="menuId" :default-expanded-keys="[props.modelValue]" :data="menus" v-model="value">
  <template #default="{ node, data }">
    <span>{{data.title}}</span>
  </template>
</el-tree-select>
</template>

<script setup lang="ts">
import {ref, watch} from "vue";
import {MenuModel} from "/@/api/system/model/MenuModel";
const disabledType = ref<number[]>([])

const props = defineProps({
  modelValue: String,
})
const emit = defineEmits(['update:modelValue'])

const menus = ref([])
const value = ref()
const init =   (menusValue: MenuModel[]) => {
  menus.value = [{
    title: '根目录',
    menuId: '0',
    children: menusValue
  }] as any
}
const setDisableType = (value) => {
  disabledType.value = value
}
const setDisable = (data: MenuModel) => {
  return disabledType.value.includes(data.type)
}

watch(
    () => value.value,
    (newValue) => {
      emit('update:modelValue',newValue)
    },

);
watch(
    () => props.modelValue,
    (newValue) => {
      value.value = newValue
    },
    { immediate: true }
);
defineExpose({init,setDisableType})
</script>

<style scoped>

</style>